<template>
  <div class="shop-list-container">
    <div class="shop-list-header">
      <div class="header-title">选择项目</div>
      <div class="shop-list-account">
        +86-{{ userInfo.mobile }}
        <span class="exit-link" @click="quit()">退出</span>
      </div>
    </div>
    <div class="select-store-wrapper">
      <div class="infobar">
        <img v-if="!userInfo.image" alt="头像" class="avatar" src="../../assets/commons/default-avatar.png">
        <img v-else alt="头像" class="avatar" :src="userInfo.image">
        <h3>{{ userInfo.name }}</h3>
        <p>
          +86-{{ userInfo.mobile }}
          <a class="info-setting" @click="userCheck = true">设置</a>
        </p>
        <h3 v-if="isRightText" class="position_text">{{ rightText }}</h3>
      </div>
      <div v-if="isShowDelModel && modelType === 1" class="inner-wrapper">
        <div v-for="item in tenantList" :key="item.id" class="shop-list-item" :class="{'is-valid':true}" @click="activeAccount(item)">
          <div class="title-item" style="color: dodgerblue">
            {{ item.sempleName }}
          </div>
          <div class="desc-item" :title="'主体信息：' + item.name">
            租户名称：{{ item.name }}
          </div>
          <div class="desc-item" style="line-height: 20px">
            所属行业：{{ item.industryName }}
          </div>
          <div class="desc-item">
            有效期：{{ item.accountBegin }} 至 {{ item.accountEnd }}
          </div>
          <div class="logout" @click.stop="loginOut(item.id)">注销</div>
        </div>

      </div>
      <div v-else-if="!isShowDelModel && modelType === 1" class="model_del_con">
        <div class="del_detail_con">
          <div class="reson_text">
            原因说明
          </div>
          <el-input
            v-model="textarea"
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
          />
          <div class="retrieve-input">
            <el-row :gutter="30">
              <el-col :span="18">
                <!-- <el-form-item class="telCodeRow"> -->
                <el-input ref="telCode" v-model="telCode" placeholder="请输入手机验证码" class="retrieve-text" />

                <!-- </el-form-item> -->
              </el-col>
              <el-col :span="6">
                <div class="telCodeBtn" :class="{'isDisabled': userInfo.mobile.length !== 11 || !isCheck}" @click="sendCode()">{{ telCodeText }}</div>
              </el-col>
            </el-row>
          </div>
          <div class="bottom_tips">
            <el-checkbox v-model="checked">已确认删除店铺风险</el-checkbox>
          </div>
          <div class="btn_con">
            <el-button type="primary">取消</el-button>
            <el-button type="primary" @click="deleteShopping(shoppingId)">删除授权</el-button>
          </div>
        </div>
      </div>
      <div v-else-if="modelType === 2" class="model_del_con">
        <div class="del_detail_con">
          <div class="retrieve-input">
            <el-row :gutter="30">
              <el-col :span="18">
                <!-- <el-form-item class="telCodeRow"> -->
                <el-input ref="telCode" v-model="telCode" placeholder="请输入手机验证码" class="retrieve-text" />

                <!-- </el-form-item> -->
              </el-col>
              <el-col :span="6">
                <div class="telCodeBtn" :class="{'isDisabled': userInfo.mobile.length !== 11 || !isCheck}" @click="sendCodes()">{{ telCodeText }}</div>
              </el-col>
            </el-row>
          </div>
          <div class="btn_con_2">
            <el-button style="width:300px" type="primary">下一步</el-button>
            <!-- <el-button type="primary" @click="deleteShopping(shoppingId)">删除授权</el-button> -->
          </div>
        </div>
      </div>

    </div>
    <el-dialog v-if="userCheck" width="45%" :close-on-click-modal="false" :visible.sync="userCheck" title="个人信息设置">
      <user @close="close()" />
    </el-dialog>
  </div>
</template>

<script>
import user from '../user/user'
import { deleteTenant } from '@/api/shopList'
import { getUserInfo, queryTenantsByUserId } from '@/api/user'
import { loadTenantId, sendCode } from '@/api/public'
import { removeToken, setTenantId } from '@/utils/auth'
import { rsa } from '@/utils/rsa'
export default {
  components: {
    user
  },
  data() {
    return {
      // 注销类型 1 为项目注销 2 为账号注销
      modelType: 1,
      // 是否显示右边文字
      isRightText: false,
      // 右边文字提示
      rightText: '短信验证',
      shoppingId: '',
      checked: false,
      // 输入的验证码
      telCode: '',
      // 验证码文字
      telCodeText: '获取验证码',
      // 是否发送
      isCheck: true,
      // 获取到的验证码
      sendCodeKey: '',
      textarea: '',
      isShowDelModel: true,
      userCheck: false,
      redirect: '',
      otherQuery: {},
      userInfo: {
        mobile: ''
      },
      tenantList: []
    }
  },
  watch: {
    $route: {
      handler: function(route) {
        const query = route.query
        if (query) {
          this.redirect = query.redirect
          this.otherQuery = this.getOtherQuery(query)
        }
      },
      immediate: true
    }
  },
  created() {
    this.getInfo()
  },
  methods: {
    // 注销商场
    deleteShopping(id) {
      if (this.textarea.length === 0) {
        this.$message.error('注销原因必填')
        return false
      }
      console.log('id', id)
      deleteTenant({
        tenantId: id,
        mobile: this.userInfo.mobile,
        description: this.textarea,
        verificationCode: this.telCode,
        key: this.sendCodeKey
      }).then(res => {
        if (res) {
          this.$message.success('注销成功')
          this.isShowDelModel = true
          this.getInfo()
        } else {
          this.$message.error('注销失败')
        }
        console.log('res', res)
      })
    },
    sendCodes() {
      if (this.isCheck && this.userInfo.mobile.length === 11) {
        // if(this.checked){
        sendCode({
          tel: this.userInfo.mobile
        }).then(response => {
          this.sendCodeKey = response
          let time = 60
          this.isCheck = false
          this.telCodeText = `重新获取 ${time}s`
          this.timer = setInterval(() => {
            time--
            this.telCodeText = `重新获取 ${time}s`
            if (time === 0) {
              this.isCheck = true
              this.telCodeText = '获取验证码'
              clearInterval(this.timer)
            }
          }, 1000)
        })
        // }else{
        // this.$message.error('请勾选确认删除店铺风险')
        // }
      }
    },
    // 发送验证码
    sendCode() {
      if (this.isCheck && this.userInfo.mobile.length === 11) {
        if (this.checked) {
          sendCode({
            tel: this.userInfo.mobile
          }).then(response => {
            this.sendCodeKey = response
            let time = 60
            this.isCheck = false
            this.telCodeText = `重新获取 ${time}s`
            this.timer = setInterval(() => {
              time--
              this.telCodeText = `重新获取 ${time}s`
              if (time === 0) {
                this.isCheck = true
                this.telCodeText = '获取验证码'
                clearInterval(this.timer)
              }
            }, 1000)
          })
        } else {
          this.$message.error('请勾选确认删除店铺风险')
        }
      }
    },
    loginOut(id) {
      if (this.$demoUser.checkUser()) {
        alert('演示账号，不能执行此操作')
        return
      }
      this.isShowDelModel = false
      this.shoppingId = id
      // this.$confirm(`此操作将永久删除该租户, 是否继续?`, '提示', {
      //   confirmButtonText: '确定',
      //   cancelButtonText: '取消',
      //   type: 'warning'
      // }).then(() => {
      //   logout({ id }).then(response => {
      //     this.$message.success('注销成功')
      //     this.getTenantList()
      //   })
      // })
    },
    close() {
      this.userCheck = false
      // this.modelType = 2
      this.getInfo()
      if (this.tenantList.length > 0) {
        this.isRightText = true
        this.rightText = '请先从以下项目注销账号后，再注销账号'
      } else {
        this.isRightText = true
        this.rightText = '注销协议'
      }
    },
    getInfo() {
      getUserInfo({}).then(response => {
        this.userInfo = response
        this.$store.commit('user/SET_USER', response)
        this.getTenantList()
      })
    },
    getOtherQuery(query) {
      console.log('query', query)
      return Object.keys(query).reduce((acc, cur) => {
        if (cur !== 'redirect') {
          acc[cur] = query[cur]
        }
        return acc
      }, {})
    },
    activeAccount(item) {
      const header = {
        'tenant_id': rsa(item.id, false)
      }
      loadTenantId({}, header).then(response => {
        this.$store.commit('app/SET_MENUFIRSTINDEX', 0)
        this.$store.commit('permission/SET_ROUTETITLE', '概览')
        localStorage.setItem('company', item.company)
        localStorage.setItem('industry', item.industry)
        setTenantId(item.id)
        this.$router.push({ path: this.redirect || '/', query: this.otherQuery })
      })
    },
    quit() {
      removeToken()
      this.$router.push({ path: 'login' })
    },
    getTenantList() {
      queryTenantsByUserId({}).then(response => {
        if (response.length > 0) {
          this.tenantList = response
        } else {
          // this.$router.push({
          //   name: 'login'
          // })
        }
      })
    }
  }
}
</script>

<style lang="scss">
  .shop-list-container {
    width: 900px;
    margin: 0 auto;
    .model_del_con{
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      .del_detail_con{
      width: 70%;
      display: flex;
      flex-direction: column;
      margin-top: 2rem;
      .reson_text{
        margin-bottom: .5rem;
      }
      .btn_con{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
      }
      .btn_con_2{
        margin-top: 40px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
      }
      .retrieve-input {
        padding-top: 30px;
        // margin-bottom: .5rem;
        // font-size: 26px;
        // .telCodeRow {
          // position: relative;
          .isDisabled {
            color: #969799 !important;
            cursor: not-allowed !important;
          }
          .telCodeBtn {
            position: absolute;
            right: 12%;
            top: 50%;
            transform: translateY(-50%);
            font-size: 16px;
            color: #155bd4;
            cursor: pointer;
          }
        // }

        .retrieve-text,.retrieve-select {
          .el-input__inner {
            border-width: 0;
            border-bottom-width: 1px;
            border-radius: 0;
          }
        }
        .el-form-item {
          margin-bottom: 0;
        }
      }
      .bottom_tips{
        margin-top: 30px;
        margin-bottom: 30px;
      }
    }
  }
    .shop-list-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 21px 0;
      .header-title {
        font-size: 16px;
        color: #333;
      }
      .shop-list-account {
        font-size: 12px;
        .exit-link {
          color: #155bd4;
          margin-left: 15px;
          cursor: pointer;
        }
      }
    }
    .select-store-wrapper {
      .infobar {
        position: relative;
        padding: 15px 20px;
        line-height: 20px;
        background: #f8f8f8;
        .avatar {
          float: left;
          width: 45px;
          height: 45px;
          margin-right: 10px;
          box-sizing: border-box;
          border: 1px solid #e5e5e5;
          border-radius: 50%;
        }
        h3 {
          font-size: 14px;
          color: #111;
          font-weight: 700;
          padding-top: 3px;
          margin: 0;
        }
        .position_text{
          font-size: 14px;
          color: #111;
          font-weight: 700;
          position: absolute;
          top: 30px;
          right: 20px;
        }
        p {
          font-size: 12px;
          color: #666;
          margin: 0;
          .info-setting {
            margin-left: 15px;
            color: #666;
          }
        }
      }
      .inner-wrapper {
        min-height: 560px;
        background-color: #fff;
        border: 5px solid #f8f8f8;
        border-top: 1px solid #f8f8f8;
        padding: 0 20px 10px;
        .shop-list-item {
          padding: 16px 20px 0;
          width: 265px;
          height: 127px;
          display: -ms-inline-flexbox;
          display: inline-flex;
          margin: 10px;
          -ms-flex-direction: column;
          flex-direction: column;
          -ms-flex-pack: justify;
          // justify-content: space-between;
          vertical-align: top;
          position: relative;
          cursor: pointer;
          border: 1px solid #e5e5e5;
          border-top: 3px solid #e5e5e5;
          border-radius: 2px;
          .title-item {
            max-width: 216px;
            overflow: hidden;
            font-size: 14px;
            margin-bottom: 8px;
          }
          .desc-item {
            color: #999;
            margin-top: 4px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            font-size: 12px;
          }
          .logout {
            position: absolute;
            bottom: 10px;
            right: 20px;
            color: red;
            font-size: 12px;
            z-index: 999;
          }
        }
        .is-valid {
          border-top-color: #ff6e6e !important;
        }
        .shop-list-item:nth-child(3n+1) {
          margin-left: 0;
        }
      }
    }
  }
</style>
